import React, {Component} from "react";

export default class Cell extends Component {


    playChess() {
        //   修改棋盘数据
        //    定位到这个数据
        const {row, col,data} = this.props;
        if (data!==0){
            return
        }

        this.props.playChess(row, col)

    }


    render() {
        const {data, row, col} = this.props
        let colStyle = {}
        if (row === 0) {
            //    第一行
            colStyle.height = "50%"
            colStyle.top = "50%"
        }

        if (row === 14) {
            //    最后一行
            colStyle.height = "50%";
        }
        let rowStyle = {}
        if (col == 0) {
            //    第一列
            rowStyle.width = "50%";
            rowStyle.left = "50%"
        }
        if (col == 14) {
            rowStyle.width = "50%";
        }

        return (
            <div className="cell-container" onClick={this.playChess.bind(this)}>
                <div className="cell-row" style={rowStyle}/>
                <div className="cell-cell" style={colStyle}/>
                {/*<div className="black-chess">黑</div>*/}
                {/*<div className="white-chess">白</div>*/}
                {
                    data == 1 && <div className="black-chess"/>
                }
                {
                    data == 2 && <div className="white-chess"/>
                }
            </div>
        )
    }
}
